﻿<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>ImagerJs - Standalone with Image Uploading (with german translation)</title>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

  <script src="../dist/imagerJs.js"></script>
  <link href="../dist/imagerJs.css" rel="stylesheet">

  <!-- Include german translations -->
  <script src="imagerJs-german.js"></script>

  <style>
    .imager-edit-container .toolbar {
      position: absolute;
    }

    #imagers {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .imager-test {
      display: inline-block;
      margin-top: 30px;
      margin-bottom: 100px;
    }

    .imager-test.custom-quality-visible {
      margin-bottom: 200px;
    }

    .image-container {
      min-width: 300px;
      margin-right: 30px;
      text-align: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading"><h3>ImagerJs - Standalone with Image Uploading (with german translation)</h3></div>
      <div class="panel-body">
        <div class="form-group">
          <button class="btn btn-primary" onclick="addNew()">Add new ImagerJs</button>
        </div>
        <div class="form-group" id="imagers">

        </div>
      </div>
    </div>
  </div>
  <script>
    // apply german translations
    ImagerJs.translations.set(window.ImagerJsGerman);

    var pluginsConfig = {
      Crop: {
        controlsCss: {
          width: '15px',
          height: '15px',
          background: 'white',
          border: '1px solid black'
        },
        controlsTouchCss: {
          width: '25px',
          height: '25px',
          background: 'white',
          border: '2px solid black'
        }
      },
      Save: {
        upload: true,
        uploadFunction: function (imageId, imageData, callback) {
          // Here should be the code to upload image somewhere
          // to Azure, Amazon S3 or similar. When upload completes we will have
          // the url of uploaded image. Then call the function callback(image_url)
          // to notify ImagerJs that image has been uploaded to the server
          //
          // Make sure that returned path is on the same domain that imagerJs was loaded from
          // or contains proper access-control headers.
          //
          // for demo we just use some wallpaper
          var imager = this;
          
		  //setTimeout(function() {
          //))  callback('/example/wallpaper-2997883.jpg');
          //}, 500); // emulate server call
		  
		  console.log('uploading ' + imageId);
		  
		  var data = imageData.replace(/^data:image\/(png|jpg|jpeg);base64,/, '');
		  var dataJson = '{ "imageId": "' + imageId + '", "imageData" : "' + data + '" }';
		
          $.ajax({
            url: 'https://www.imagerjs.com/api/upload/image',
			dataType: 'json',
			data: dataJson,
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            success: function(imageUrl) {
              callback(imageUrl); // assuming that server returns an `imageUrl` as a response
              console.log('uploading success: ' + imageUrl);
            },
            error: function (xhr, status, error) {
                console.log(error);
            }
          });
		  
		  
        }
      }
    };

    var options = {
      plugins: ['Rotate', 'Crop', 'Resize', 'Toolbar', 'Save', 'Delete', 'Undo'],
      editModeCss: {
      },
      pluginsConfig: pluginsConfig,
      quality: {
        sizes: [
          { label: 'Original', scale: 1, quality: 1, percentage: 100 },
          { label: 'Large', scale: 0.5, quality: 0.5, percentage: 50 },
          { label: 'Medium', scale: 0.2, quality: 0.2, percentage: 20 },
          { label: 'Small', scale: 0.05, quality: 0.05, percentage: 5 }
        ]
      }
    };

    var addNew = function () {
      var $imageContainer = $(
              '<div class="image-container">' +
              '  <img class="imager-test" ' +
              '       src="" ' +
              '       style="min-width: 300px; min-height: 200px; width: 300px;">' +
              '</div>');

      $('#imagers').append($imageContainer);
      var imager = new ImagerJs.Imager($imageContainer.find('img'), options);
      imager.startSelector();

      imager.on('editStart', function () {
        // fix image dimensions so that it could be properly placed on the grid
        imager.$imageElement.css({
          minWidth: 'auto',
          minHeight: 'auto'
        });
        var qualitySelector = new window.ImagerQualitySelector(imager, options.quality);

        var qualityContainer = $('<div class="imager-quality-standalone"></div>');
        qualityContainer.append(qualitySelector.getElement());

        imager.$editContainer.append(qualityContainer);

        qualitySelector.show();
        qualitySelector.update();
      });
    };
  </script>
</body>
</html>